<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Template - Metro UI :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
    <div class="container">
        <h1>Template test page</h1>

        <div class="mt-4 mb-4">
            <button class="button" onclick="$('.example').attr('data-template-data', 'webSkills')">Show Web skills</button>
            <button class="button" onclick="$('.example').attr('data-template-data', 'otherSkills')">Show Other skills</button>
            <button class="button" onclick="Metro.getPlugin('.example', 'template').buildWith('otherSkills2')">Show Other</button>
            <button class="button" onclick="Metro.getPlugin('.example', 'template').buildWith(otherSkills2)">Show Other 2</button>
        </div>

        <div class="example" data-role="template" data-template-data="webSkills">
            <h3>My skills</h3>
            <% if(this.showSkills) { %>
            <ul>
                <% for(var i = 0; i < this.skills.length; i++) { %>
                <li><% this.skills[i] %></li>
                <% } %>
            </ul>
            <% } else { %>
            <span>Nothing to show</span>
            <% } %>
        </div>
    </div>

<script src="../lib/metro.js"></script>
<script>
    $(".example").on("template-compile", function(e){
        console.log(e.detail.template);
        console.log(e.detail.compiled);
    });
    var webSkills = {
        skills: ["javascript", "html", "css"],
        showSkills: true
    };

    var otherSkills = {
        skills: ["php", "oracle", "mysql", "java", "pascal", "c/c++", "kotlin"],
        showSkills: true
    };

    var otherSkills2 = {
        skills: ["guitar", "shooting", "dog", "fishing"],
        showSkills: true
    };
</script>
</body>
</html>
